<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue </title>
    <script src="../js/vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }

        .tabs {
            font-size: 14px;
            color: #657180;
            /*box-shadow: 0 0 6px rgba(0,0,0,.4);*/
        }

        .tabs-bar:after {
            content: '';
            display: block;
            width: 100%;
            height: 1px;
            background: #d7dde4;
            margin-top: -1px;
        }

        .tabs-tab {
            display: inline-block;
            padding: 4px 16px;
            margin-right: 6px;
            background: #fff;
            border: 1px solid #d7dde4;
            cursor: pointer;
            position: relative;
            transition: all .33s cubic-bezier(.38,.8,.32,1.07);
            transform: translateX(0%);
        }

        .tabs-tab-active {
            color: #3399ff;
            border-top: 1px solid #3399ff;
            border-bottom: 1px solid #fff;
        }

        .tabs-tab-active:before {
            content: '';
            display: block;
            height: 1px;
            background: #3399ff;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            transition: .5s;
            transform: translateX(0%);
        }

        .tabs-content {
            padding: 8px 0;
        }

    </style>
</head>

<body>
<div id="app" v-cloak>
    <tabs v-model="activeKey">
        <pane label="标签一">
            标签一的内容
        </pane>
        <pane label="标签二">
            标签二的内容
        </pane>
        <pane label="标签三">
            标签三的内容
        </pane>
    </tabs>
</div>
</body>

<script>
    Vue.component('tabs', {
        template: '<div class="tabs">\
                        <div class="tabs-bar">\
                            <div\
                                :class="tabCls(item)"\
                                v-for="(item,index) in navList"\
                                @click="handleChange(index)">\
                                {{ item.label }}\
                            </div>\
                        </div>\
                        <div class="tabs-content">\
                            <slot></slot>\
                        </div>                     \
                   </div>',
        props: {
            value: {
                type: [String, Number]
            }
        },
        data() {
            console.info('data' + ' ' + this.value);
            return {
                currentValue: this.value,
                navList: []
            }
        },
        methods: {
            tabCls(item) {
                return [
                    'tabs-tab',
                    {
                        'tabs-tab-active': this.currentValue === item.name
                    }
                ]
            },
            getTabs() {
                return this.$children.filter((item) => {
                    return item.$options.name === 'pane';
                })
            },
            updateNav() {
                console.log('updateNav');
                this.navList = [];
                this.getTabs().forEach((pane, index) => {
                    //console.info(this);
                    if (!pane.name) {
                        pane.name = index;
                    }
                    this.navList.push({
                        label: pane.label,
                        name: pane.name
                    });
                    if (index === 0) {
                        if (!this.currentValue) {
                            this.currentValue = pane.name;
                        }
                    }
                });
                this.updateStatus();
            },
            updateStatus() {
                this.getTabs().forEach((tab) => {
                    return tab.show = tab.name === this.currentValue;
                });
            },
            handleChange(index) {
                let nav = this.navList[index];
                this.currentValue = nav.name;
                console.info('handleChange' + this.currentValue);
                this.$emit('input', this.currentValue);
                this.$emit('on-change', this.currentValue);
            }

        },
        watch: {
            value(val) {
                // console.info('watch-tabs-value');
                this.currentValue = val;
            },
            currentValue(val) {
                console.info('watch-tabs-currentValue');
                this.updateStatus();
            }
        }
    });

    Vue.component('pane', {
        template: '<div class="pane" v-show="show">\
                        <slot></slot>\
                   </div>',
        props: {
            name: {
                type: String
            },
            label: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                show: true
            }
        },
        methods: {
            updateNav() {
                this.$parent.updateNav();
            }
        },
        watch: {
            label() {
                this.updateNav();
            },
            name() {
                this.updateNav();
            }
        },
        mounted() {
            this.updateNav();
        }
    });

    new Vue({
        el: '#app',
        data: {
            // activeKey: '0'
        }
    })
</script>
</html>
